<template>
	<div>
		<!--应用实例 选择-->
		
		<mobanSelect ref="mobanSelect" @change="mobanChange"></mobanSelect>
		<baseSelect 
			v-loading="loading"
			v-show="options.length||loading"
			ref="baseSelect"
			:defaultValue="defaultValue" 
			:optionList="options" 
			:filterable="true"
			placeholder="请选择应用实例"
			@change="changeHandel"></baseSelect>
		<span style="margin-left: 10px;font-size: 12px;" class="grey"
			v-show="templateId&&(!options||!options.length)&&!loading"
	   	>
	   	您所选的模板无实例
	  </span>
			
	</div>
</template>

<script>
	import baseSelect from "@/view/components/select/select";
	import mobanSelect from "@/view/components/select/mobanSelect";
	import {getAppInstList} from "@/service/swagger/AcAppInstController"
	
	export default {
		components : {
			baseSelect,
			mobanSelect,
		},
		props:[
			"defaultValue"
		],
		data(){
			return {
				options: [],
				templateId : "",
				loading:false,
				
				selectedMoban : [],
			}
		},
		mounted(){
			this.getData();
		},
		methods : {
			changeHandel(name , v , selectedArr){
				this.$emit("change", "shiliSelect", v, {
					moban : this.selectedMoban,
					shili : selectedArr
				})
			},
			
			getData(){
				if(!this.templateId){
					return ;
				}
				this.loading = true;
				getAppInstList({
					templateId : this.templateId
				}).then(ret=>{
					this.options = ret.data.data.map(el=>{
						return {
							label : el.instName ,
							value : el.instId ,
							sourceData : el,
						}
					})
					this.loading = false;
					this.$refs.baseSelect.asyncUpdateOption(this.options)
				})
			},
			
			reset(){
				this.$refs.baseSelect.reset()
				this.$refs.mobanSelect.reset()
			},
			
			mobanChange(name,v, selectedArr){
				this.selectedMoban = selectedArr;
				this.templateId = v ;
				this.getData();
			},
		}
	}
</script>

<style>
</style>